<template>
  <div class="ImageText">
    <div
      class="text"
      v-for="(v, index) in arr"
      :key="index"
      @click="fun(v.proid)"
    >
      <img :src="v.img1" alt="" />
      <p class="one">{{ v.proname }}</p>
      <p class="two">￥{{ v.originprice }}</p>
    </div>
  </div>
</template>
 
 <script>
import service from "../../../utils/service";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    service({
      url: "http://118.178.238.19:3001/api/pro/recommendlist",
      method: "get",
      params: {
        limitNum: 10,
      },
    }).then((res) => {
      this.arr = res.data.data;
      console.log(res.data.data);
    });
  },
  methods: {
    fun(myid) {
      console.log(myid);
      this.$router.push({ name: "xqy", params: { yf: myid } });
    },
  },
};
</script>
 
 <style scoped>
.ImageText {
  width: 95%;
  display: flex;
  margin-left: 0.5rem;
  border-radius: 1rem;
  flex-wrap: wrap;
  background-color: #f6f6f6;
  justify-content: space-around;
}
.ImageText .text {
  border-radius: 1rem;
  width: 45%;

  border-radius: 1rem;
  background-color: white;
  margin-bottom: 1rem;
}
.ImageText .text img {
  width: 159.5px;
  height: 176.49px;
  background-color: #c82519;
  border-radius: 1rem 1rem 0 0;
}
.ImageText .text .one {
  font-size: 12px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ImageText .text .two {
  color: red;
}
</style>